<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表全选/全不选/反选/获取选中数据</title>
</head>

<body>
    <input type="checkbox" onclick="fun1(this)" />全选
    <a href="javaScript:fun2()">反选</a><br>
    <input type="checkbox" name="cks" value="1" />1 <br>
    <input type="checkbox" name="cks" value="2" />2<br>
    <input type="checkbox" name="cks" value="3" />3<br>
    <button onclick="fun3()">获取所选中值</button>
</body>
<script>
    // 复选框全选
    function fun1(ck) {
        // 判断是否选中
        let flag = ck.checked;
        // 获取当前复选框操作的一组复选框对象
        let cks = document.getElementsByName("cks");
        // alert(cks.length);
        // 遍历cks一组对象
        for (let i = 0; i < cks.length; i++) {
            cks[i].checked = flag;
        }
    }
</script>
<script>
    // 复选框反选
    function fun2(ck) {
        // 获取当前复选框操作的一组复选框对象
        let cks = document.getElementsByName("cks");
        for (let i = 0; i < cks.length; i++) {
            cks[i].checked = !cks[i].checked;
        }

    }
</script>
<script>
    function fun3() {
        // 声明一个数组接收获取到选择的数据
        let arr = new Array();
        // 获取所有的复选框对象
        let cks = document.getElementsByName("cks");
        // 遍历
        for (let i = 0; i < cks.length; i++) {
            if (cks[i].checked) {
                // 获取选择复选框的值
                // arr[i] = cks[i].value; // 存在空值，有问题
                arr.push(cks[i].value);  // 推荐这种
            }
        }
        console.log(arr);
    }
</script>

</html>